<template>
	<div class="container">
		<header>
			<h1>房产资讯</h1>
		</header>
		<div class="ad">
			<swiper :options="swiperOptions" v-if="imgList.length">
				<swiper-slide v-for="(item,index) in imgList" :key="index">
					<p>{{item.title}}<span>{{index+1}}/{{imgList.length}}</span></p>
					<h1>{{item.type}}</h1>
					<p>{{item.desc}}</p>
					<img :src="item.imgPath">
				</swiper-slide>
			</swiper>
			<!-- <div class="swiper-container">
				<ul class="swiper-wrapper">
					
					<li class="swiper-slide">
						<p>最新资讯<span>02/03</span></p>
						<h1>北京市行情</h1>
						<p>开发商资金链普遍吃紧，包图正式拉开全国房企全国房企</p>
						<img src="images/banner3.jpg">
					</li>
					<li class="swiper-slide">
						<p>最新资讯<span>03/03</span></p>
						<h1>北京市行情</h1>
						<p>开发商资金链普遍吃紧，包图正式拉开全国房企全国房企</p>
						<img src="images/banner3.jpg">
					</li>
				</ul>
			</div> -->
		</div>
		<!-- <script>
			var ul = document.querySelector(".ad ul");
			var num = 0;
			var liclone=ul.children[0].cloneNode(true);
			var c=ul.appendChild(liclone);
			var liclone2=ul.children[1].cloneNode(true);
			var c2=ul.appendChild(liclone2);
			ul.style.width=ul.children.length*6.9+"rem";
			setInterval(function () {
				num++;
				if (num > ul.children.length-2) {
					num = 0;
					ul.style.left = 0 + "px";
				}
				var timer = setInterval(function () {
					if (ul.offsetLeft <= -num * (ul.offsetWidth / ul.children.length)) {
						clearInterval(timer);
					}
					ul.style.left = ul.offsetLeft - 2 + "px";
				}, 5);
			}, 2000);
		</script> -->
		<section class="content">
			<h1>热门资讯1111
				<span>
					<router-link :to="{name:'infoMore'}">
						<a href="javascript:;">更多&gt;</a>
					</router-link>
				</span>
			</h1>
			<ul class="case">
				<li v-for="(val,index) in hotList" :key="index">
					<router-link :to="{name:'detail',params:{nid:val.nid}}">
						<a href="javascript:;">
							<img :src="val.imgPath2" class="img-left fl">
							<div class="text fr">
								<p>{{val.title}}</p>
								<div>包图新闻</div>
								<span><img src="images/icon1.jpg">{{val.comments}}</span>
								<span><img src="images/icon2.jpg">{{val.likes}}</span>
							</div>
						</a>
					</router-link>
				</li>

			</ul>
			<p style="text-align:center; margin-bottom: 2rem;font-size: .4rem;" @click="getMoreHot">{{loadMore}}</p>
		</section>
	</div>
</template>

<script type="text/ecmascript-6">
	import axios from 'axios'
	export default {
		// 组件名称
		name: 'info',
		// 加载页面的子组件（也没面分离的内容）
		components: {},
		data() {
			return {
				// 定义变量
				swiperOptions: {
					autoplay: {
						delay: 3000,
						stopOnLastSlide: false
					},
					loop: true,
					pagination: {
						el: '.pagination'
					},
					paginationClickable: false

				},
				imgList: [],
				loadMore: '加载更多',
				pn: 1

			}

		},
		computed: {
			//设置hotList计算属性
			hotList() {
				return this.$store.state.info.hotList; //返回全局state中的info块中的hotList对象
			}
		},
		mounted: function () {
			axios({
				method: "get",
				url: '/data/ad_data.json'
			}).then((res) => {
				let data = res.data
				if (data.code == "200") {
					this.imgList = data.info_ad
				}
			}).catch((error) => {
				// 错误（网络中断、请求地址有问题）
				console.log(error)
			})
			this.$store.dispatch('getHotList', this.pn)
		},
		methods: {
			// 事件的函数
			getMoreHot() {
				// 做分页，加载列表更多数据（去调用中间件的getHouse方法）
				let arr = this.$store.state.info.hotList;
				let total = this.$store.state.info.hotTotal;
				if (arr.length >= total) {
					return; // 阻止执行
				}
				this.$store.dispatch('getHotList', ++this.pn);
				console.log(this.$store.state.info.hotList)
			}

		},
		watch: {
			//监听属性，监听属性的值，当值变化时会实时更新熟悉那个值，当值发生变化时触发
			hotList() {
				let arr = this.$store.state.info.hotList;
				let total = this.$store.state.info.hotTotal;
				if (arr.length >= total) {
					this.loadMore = '我是底线的';
				}
			}
		}
	}
</script>

<style scoped lang="less" rel="stylesheet/less">
	header {
		height: .7rem;
		margin: .35rem .25rem 0;
		font-size: .28rem;
	}

	header p {
		font-size: .48rem;
	}

	.ad {
		// height: 6.3rem !important;
		// margin-left: .39rem;
		// margin-top: .47rem;
		margin: 0 auto;
		margin-left: 10px;
		margin-right: 10px;
		overflow: hidden;
		position: relative;
	}

	.ad p:nth-child(1) {
		font-size: .30rem;
		color: #fbac7c;
	}

	.ad p:nth-child(1) span {
		color: #7a7a7a;
		font-size: .25rem;
		float: right;
	}

	.ad p:nth-child(1)::after {
		content: "";
		display: block;
		clear: both;
	}

	.ad h1 {
		margin-top: .19rem;
		color: #424241;
		font-size: .42rem;
	}

	.ad p:nth-child(3) {
		margin-top: .14rem;
		color: #424242;
		font-size: .32rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-bottom: .23rem;
	}

	.ad img {
		width: 100%;
		height: auto;
		display: block;
		border-radius: .16rem;
	}

	.ad ul {
		/* width: 20.7rem; */
		width: 27.6rem;
		position: relative;
		top: 0;
		left: 0;
	}

	.ad ul li {
		width: 6.75rem;
		float: left;
		margin-right: .15rem;
	}

	.content {
		margin: 0 .3rem 1.2rem;
	}

	.content h1 {
		font-size: .48rem;
		margin: .45rem 0;
	}

	.content h1 span {
		float: right;
		font-size: .34rem;
		color: #b4b4b4;
	}

	.content h1 span a {
		color: inherit;
		text-decoration: none;
	}

	.content .case li img.img-left {
		width: 2.05rem;
		height: 1.52rem;
	}

	.content .case li .text {
		width: 4.51rem !important;
		height: 1.52rem !important;
		position: relative;
	}

	.content .case li .text p {
		font-size: .36rem;
		line-height: .46rem;
		color: #7c7c7c;
	}

	.content .case li .text div {
		display: inline-block;
		padding: .07rem;
		color: #ff3b3d;
		font-size: .26rem;
		background-color: f6f6f6;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.content .case li .text span {
		color: #aaaaa8;
		font-size: .26rem;
		position: absolute;
		bottom: .1rem;
	}

	.content .case li .text span:nth-last-child(2) {
		right: 1.2rem;
	}

	.content .case li .text span:nth-last-child(1) {
		right: .13rem;
	}

	.content .case li .text span img {
		width: .26rem;
		height: .24rem;
		margin-right: .1rem;
	}
</style>